import React from "react";

class App extends React.Component {
  // 初始化
  state = {};
  // 挂载
  constructor(props) {
    // 必须调用父级constructor
    super(props);
    // 初始化state

    // 方案二： 修改方法的this指向
    this.handleClick = this.handleClick.bind(this);
  }

  // {/* 方案四：  */}
  handleClick = () => {
    // 实例
    console.log(this);
  };
  // 渲染
  render() {
    console.log(document.querySelector('.qwer'))
    return (
      <div>
        app
        <button onClick={this.handleClick}>点我</button>
        {/* 方案一：  */}
        <button onClick={() => this.handleClick()}>点我</button>
        {/* 方案三：  */}
        <button onClick={this.handleClick.bind(this)}>点我</button>
        {/* 方案四：  */}
        <button onClick={this.handleClick}>点我</button>

        <div className="qwer">123</div>
      </div>
    );
  }
  //组件挂载就绪
  componentDidMount() {
    // 进行副作用操作
    // 比如： 操作DOm
    console.log(document.querySelector('.qwer'))

    // 发请求
  }
}

export default App;
